<template>
<!-- 根元素上不能v-for遍历-->
   <tbody>
          <tr v-for='(item,index) in list' :key='item.id'>
            <td>{{index+1}}</td>
            <td>{{item.subject}}</td>
            <td :class="item.score<60 ? 'red' :''">{{item.score}}</td>
            <!-- 使用函数来渲染页面，不能直接引用moment包 -->
            <td>{{DateFn(item.date)}}</td>
            <td><a href="#" @click='del(item.id)'>删除</a></td>
          </tr>
        </tbody>
        <!-- <tbody >
          <tr>
            <td colspan="5">
              <span class="none">暂无数据</span>
            </td>
          </tr>
        </tbody> -->
</template>

<script>
//引入moment包
import moment from 'moment'
export default {
  //4.接收
  props:{
    list:{
      type:Array, 
      required:true
    }
  },

  methods:{
    //单向数据流
    del(id){
      this.$emit('del',id)
    },
    DateFn(time){
      // console.log(time);
      //需要返回数据 return
     return moment(time).format('YYYY-MM-DD HH:mm:ss')
    }

  }

}
</script>

<style>

</style>